<template>
    <div class="dialoglistDiv">
        <div class="dialogsearchDiv">
            <el-select v-model="obj.req.state" placeholder="状态" class="search_select" clearable>
                <el-option v-for="(item,index) in globalData.completeAry" :key="index" :label="item.text" :value="item.value" />
            </el-select>
            <el-input clearable placeholder="匹配姓名" v-model="obj.req.key" class="search_key" />
            <span class="btn search" @click="init(true)">搜索</span>
        </div>
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="">姓名</li>
                <li class="wcen">类别</li>
                <li class="mw200 wcen">添加时间</li>
                <li class="mw200 wcen">确认时间</li>
                <li class="wcen">状态</li>
                <li class="mw150">操作</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="liflex">{{x.name}}</li>
                    <li class="wcen">
                        <div :class="[proxy.$utils.find(globalData.staffTypeList, x.type, 'label')]">{{proxy.$utils.find(globalData.staffTypeList, x.type)}}</div>
                    </li>
                    <li class="mw200 wcen">{{x.intime}}</li>
                    <li class="mw200 wcen">{{x.complete_time}}</li>
                    <li class="wcen">
                        <div :class="[proxy.$utils.find(globalData.completeAry, x.state, 'label')]">{{proxy.$utils.find(globalData.completeAry, x.state)}}</div>
                    </li>
                    <li class="mw150">
                        <!-- <u @click="add(x)">添加</u> -->
                        <DelConfirm class="" @yesClick="del(x)" />
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    import DelConfirm from '@/components/del_confirm.vue'
    let { proxy } = getCurrentInstance()
    const props = defineProps({
        drill_id: { type: String },
        coustate: { type: Number },
    })

    let obj = reactive({
        ary: [],
        req: {
            "key":"",
            "state":"",
            currentpage: 1,
            pagesize: 10,
            count: 0,
            drill_id: props.drill_id,
        }
    });
    let init = (ser) => {
        if(!ser){
            obj.req.state = props.coustate
        }
        proxy.$ajax({
            url: '/drill/user_list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    let add = (x)=>{
        proxy.$ajax({
            url: '/drill/user_add',
            data: {drill_id:props.drill_id,user_id:x.property_id},
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin(`添加成功`, 'success')
                proxy.$emit('init')
                proxy.$emit('close')
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }

    let del = x => {
        proxy.$ajax({
            url: '/drill/user_delete',
            data: {drill_id:props.drill_id,user_id:x.property_id},
            bfLoading: true
        }).then(d => {
            if(d.success){
                proxy.elMessageMixin("删除成功", 'success')
                proxy.$emit('init')
                proxy.$emit('close')
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }

</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .listDiv { top:70px; }
    #tb ul li.li2 { width: 70px; }
</style>